<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 100%;
            height: 1000px;
            overflow: hidden;
        }

        #box>div {
            width: 800px;
            height: 480px;
            /* background-color: hotpink; */
            margin: 0 auto;
            margin-top: 200px;
            /* border-radius: 10px; */
            
            overflow: hidden;
        }

        #box>div>div {
            width: 800px;
            height: 240px;
            background-color: #f8f8f8;
            border: #ffffff 1px solid;
            box-sizing: border-box;
            overflow: hidden;
        }

        #bdd1>div {
            width: 760px;
            margin: 20px auto 0;
            height: 200px;
            background-color: #ffffff;
        }

        #bdd2>div {
            width: 760px;
            margin: 20px auto 0;
            height: 200px;
            background-color: #f8f8f8;
        }

        #box>div>div>div>div {
            overflow: hidden;
            float: left;
        }

        #box>div>div>div>div>img {
            width: 260px;
            height: 200px;
        }

        #bdd1>div>div:first-child {
            width: 260px;
            height: 200px;
            box-sizing: border-box;
            /* border: 1px solid #000000; */
            float: left
        }

        #bdd1>div>div:last-child {
            width: 500px;
            height: 200px;
            box-sizing: border-box;
            /* border: 1px solid #000000; */
            float: left;
        }

        #bdd2>div>div:first-child {
            width: 260px;
            height: 200px;
            box-sizing: border-box;
            /* border: 1px solid #000000; */
            float: left
        }

        #bdd2>div>div:last-child {
            width: 500px;
            height: 200px;
            box-sizing: border-box;
            /* border: 1px solid #000000; */
            float: left;
        }
        .dp1{
            font-size: 20px;
            margin: 10px 0 0 20px;
            color: #fcb222;
            line-height: 40px;
            height: 40px;
            /* background-color: #efd197; */
        }
        .dp2{
            font-size: 15px;
            margin: 10px 0 0 20px;
            color: #6e6e6e;
        }
        .dp3{
            /* border:1px solid #4a4a4a ; */
            box-sizing: border-box;
            width: 500px;
            height: 50px;
            overflow: hidden;
            /* background-color: #f8f8f8; */
            margin: 10px 0 0 20px;
        }
        .dp3>div{
            float: left;
            /* font-size: 15px; */
            /* margin: 10px 0 0 20px; */
            margin-top: 15px;
            vertical-align: top;
        }
        .dp3>div:first-child{
            width: 100px;
            height: 30px;
            /* background-color: #fcb222; */
            /* text-align: center; */
            line-height: 30px;
            color: #888888;
            padding-left:25px ;
            box-sizing: border-box;
            background: url("./img/网页严选图_08.gif") no-repeat 0px center;
            background-size:20px 20px ;
        }
       .dp3>div:nth-child(2){
            width: 100px;
            height: 30px;
            line-height: 30px;
            color: #888888;
            /* background: #fcb222 ; */
            background-size: 20px 20px ; 
       }
       .dp3>div:nth-child(3){
            width: 100px;
            padding-left: 25px;
            height: 30px;
            line-height: 30px; 
            color: #888888;
            /* background-color: #fc4c4c; */
            background-size:20px 20px ;
            overflow: hidden;
            background: url("./img/网页严选图_10.gif") no-repeat 0 center;
            background-size: 20px 20px ;
       }
       .dp3>div:nth-child(2)>img{
                  margin-top: 5px;
                  border-radius: 50%;
       }
      .dp3>div:nth-child(2)>span{
                  display: inline-block;
                  /* margin-top: 5px; */
                  vertical-align: top;text-decoration: underline;
                  color: #fcb222;
                  margin-left: 10px;
       }
       .dp1>div{
                  float: right;
                  width: 70px;
                  height: 30px;
                  /* background-color: #fcb222; */
                  margin-right: 10px;
                  border: 1px solid #fcb222;
                  border-radius: 10px;
                  box-sizing: border-box;
                  margin-top: 5px;
                  background: url("./img/网页严选图_04.gif") no-repeat 5px center;
                  background-size: 20px 20px ;
                  line-height: 30px;
                  padding-left: 28px;
       }
    </style>
</head>

<body>
    <div id="box">
        <div>
            <div id="bdd1">
                <div>
                    <div><img src="https://picsum.photos/260/200?random=1"></div>
                    <div>
                        <div class="dp1"><span>去查山|杭州亲自两日游</span><div>APP</div></div>
                        <p class="dp2">吃春茶的季节到了。 由于爸爸妈妈爱茶，两多岁的幼崽爱爬山，于是选定了 杭州 作为清明踏青的目的地。 行程安排 去过很多次 杭州，不一样的是这次是亲子游，所以没有安排特别严格的特种兵行.</p>
                        <div class="dp3"><div>杭州,by</div><div><img src="https://picsum.photos/20/20?random=1"><span>少女小易</span></div><div>1976/2</div><img src="./img/网页严选图_02.gif" width="50px" style="margin: 5px 0 0 103px;"></div>
                    </div>
                </div>
            </div>
            <div id="bdd2">
                <div>
                    <div><img src="https://picsum.photos/260/200?random=2"></div>
                    <div><p class="dp1">去查山|杭州亲自两日游</p>
                        <p class="dp2">吃春茶的季节到了。 由于爸爸妈妈爱茶，两多岁的幼崽爱爬山，于是选定了 杭州 作为清明踏青的目的地。 行程安排 去过很多次 杭州，不一样的是这次是亲子游，所以没有安排特别严格的特种兵行.</p>
                        <div class="dp3"><div>杭州,by</div><div><img src="https://picsum.photos/20/20?random=1"><span>少女小易</span></div><div>1976/2</div><img src="./img/网页严选图_02.gif" width="50px" style="margin: 5px 0 0 103px;"></div></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>